<template>
	<view>
		<view class="dao_card_bg"></view>
		<view class="dao_card">
			<!-- logo -->
			<view class="dao_logo">
				<image src="../static/images/logo.png" mode=""></image>
			</view>
			<!-- 详细内容 -->
			<view class="dao_content">
				<view class="title">
					欢迎使用daobook
				</view>

				<!-- 支持按钮 -->
				<view class="support_btn">
					<u-icon name="order" color="#fff" size="24"></u-icon>
					<view class="support">创建dao步骤</view>
				</view>
				<BsinTitle text="步骤一"></BsinTitle>
				<view class="description">
					打开网址：http://daobook.s11edao.com/
				</view>
				<BsinTitle text="步骤二"></BsinTitle>
				<view class="description">
					用daobook的账户登录
				</view>
				<BsinTitle text="步骤三"></BsinTitle>
				<view class="description">
					点击dao治理菜单创建自己的dao
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.dao_card_bg {
		height: 400rpx;
		background-color: $echo-main-color;
	}

	.dao_card {
		z-index: 2;
		top: -100rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 0 40rpx;

		// logo
		.dao_logo {
			width: 190rpx;
			height: 160rpx;
			overflow: hidden;
			margin: 0 auto;
			position: relative;
			background-color: #fff;
			top: -80rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		// content
		.dao_content {
			padding-bottom: 200rpx;

			// 标题
			.title {
				font-size: $echo-font-size-title;
				font-weight: 700;
				text-align: center;
				margin-top: -60rpx;
				margin-bottom: 40rpx;
			}

			// 点赞收藏列表
			.likeList {
				margin: 40rpx;
				display: flex;
				justify-content: center;

				&_item {
					display: flex;
					width: 30%;
					align-items: center;
					justify-content: center;

					.num {
						margin-left: 16rpx;
					}
				}
			}

			// 支持按钮
			.support_btn {
				display: flex;
				align-items: center;
				padding: 20rpx;
				background-color: $echo-main-color;
				font-weight: 400;
				border-radius: 8rpx;
				color: #fff;

				.support {
					margin-left: 20rpx;
				}

				.proverb {
					flex: 1;
					text-align: right;
					margin-right: 20rpx;
				}
			}

			// 描述信息
			.description {
				padding: 0 30rpx;
				line-height: 60rpx;
			}
		}

		.under_box {
			position: fixed;
			padding: 40rpx;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #f8f9fa;
			border-top: 0.5px solid #dee2e6;

			.join_btn {
				width: 90%;
			}
		}
	}
</style>
